import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  autoFocus = {
    focusValue: true,
  };
  searchFlag = false;
  searchText = '';

  hidden: boolean = false;
  fullScreen: boolean = false;
  unselectedTintColor: string = '#888';
  selectedIndex: number = 1;
  height: number = document.documentElement.clientHeight;

  onLeftClick() {
    console.log('onLeftClick');
  }

  cancelSearch() {
    console.log('cancelSearch');
    this.searchFlag = false;
  }

  showSearch() {
    console.log('showSearch');
    this.searchFlag = true;
  }

  search() {
    console.log('search', this.searchText);
  }

  onOpenChange($event: MouseEvent) {
    console.log('onOpenChange', $event);
  }

  showTabBar(event: any) {
    event.preventDefault();
    this.hidden = !this.hidden;
  }

  showNextTabBar(event: any) {
    event.preventDefault();
    const PANE_COUNT = 4;
    if (this.selectedIndex == PANE_COUNT - 1) {
      this.selectedIndex = 0;
    } else {
      this.selectedIndex++;
    }
    console.log('selectedIndex: ', this.selectedIndex);
  }

  tabBarTabOnPress(pressParam: any) {
    console.log('onPress Params: ', pressParam);
    this.selectedIndex = pressParam.index;
  }
}
